<template>
	<div class="fns-table-component">
		<el-table
			class="table"
			border
			tooltip-effect="dark"
			highlight-current-row
			:size="customerField.size"
			v-loading="customerField.loading"
			:empty-text="emptyText"
			:data="customerField.tableData"
			@selection-change="handleSelectionChange">
			<slot name="left"></slot>
			<el-table-column resizable v-for="(item, index) in customerField.allField" :key="index" :type="item.type"
											 :label="item.label" :prop="item.prop" :width="item.width ? item.width : ''"
											 :align="item.align" :sortable="item.sortable" :formatter="item.formatter"
											 :show-overflow-tooltip="true">
			</el-table-column>
			<slot name="right"></slot>
		</el-table>
	</div>
</template>

<script>
	export default {
		props: {
			customerField: {
				default: {}
			}
		},
		created() {
		},
		mounted() {
		},
		computed: {
		},
		watch: {
		},
		data() {
			return {
				emptyText: '暂无数据',
				multipleSelection: []
			}
		},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val
			}
		}
	}
</script>

<style lang="scss">
@import "../../styles/variables";
	/*表格组件table*/
	.fns-table-component{
		
		.el-table td.is-center,
		.el-table th.is-center{
			text-align: left;
		}
		a {
			margin-right: 10px;
		}
		.el-table {
			color: #555;
			thead {
				color: #333;
			}
			th {
				padding: 0;
				line-height: 60px;
				background-color: $colorTableHeader !important;
			}
			.el-button {
	   		margin-left: 0;
	    }

			.cell {
				line-height: 30px;
				font-weight: normal;
			}

			td {
				border-bottom-color: #E6E6E6;
			}

			// 操作按钮样式
			.el-button {
				padding: 5px;
				border: 0;
				background-color: transparent;
			}
		}
	}
</style>
